<!-- 线索公海导入窗口 -->
<template>
  <Dialog v-model="dialogVisible" title="线索列表导入" width="90%" class="import-dialog">
    <div class="dialog-content">
      <!-- 头部区域 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:upload-filled" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">线索列表导入</h3>
          <p class="dialog-subtitle">批量导入线索数据到公海</p>
        </div>
      </div>

      <div class="main-content">
        <el-row :gutter="20" class="content-row">
          <!-- 左侧导入区域 -->
          <el-col :span="8" class="import-section">
            <div class="import-wrapper">
              <div class="section-header">
                <Icon icon="ep:setting" class="section-icon" />
                <span class="section-title">导入配置</span>
              </div>

              <div class="form-content">
                <el-form-item
                  label="所属模块"
                  :rules="[{ validator: '所属模块为必选项', required: true, trigger: 'change' }]"
                  class="form-item"
                >
                  <div class="select-wrapper">
                    <Icon icon="ep:grid" class="select-icon" />
                    <el-select
                      v-model="moduleId"
                      placeholder="请选择模块"
                      @change="onChangeSetModuleId"
                      class="enhanced-select"
                    >
                      <el-option
                        v-for="item in modules"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </el-form-item>

                <el-form-item label="指定负责人" class="form-item">
                  <div class="select-wrapper">
                    <Icon icon="ep:user" class="select-icon" />
                    <el-select
                      filterable
                      v-model="ownerUserId"
                      class="enhanced-select"
                      placeholder="请选择负责人"
                    >
                      <el-option
                        v-for="item in userOptions"
                        :key="item.id"
                        :label="item.nickname"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </el-form-item>

                <!-- 文件上传区域 -->
                <div class="upload-section">
                  <div class="upload-header">
                    <Icon icon="ep:document" class="upload-icon" />
                    <span class="upload-title">文件上传</span>
                  </div>

                  <el-upload
                    ref="uploadRef"
                    v-model:file-list="fileList"
                    :auto-upload="false"
                    :disabled="formLoading"
                    :headers="uploadHeaders"
                    :limit="1"
                    :on-error="submitFormError"
                    :on-exceed="handleExceed"
                    :on-success="submitFormSuccess"
                    accept=".xlsx"
                    action="none"
                    drag
                    class="enhanced-upload"
                  >
                    <div class="upload-content">
                      <Icon icon="ep:upload" class="upload-main-icon" />
                      <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
                    </div>

                    <template #tip>
                      <div class="upload-tip">
                        <div class="tip-section">
                          <div class="tip-title">
                            <Icon icon="ep:warning" class="tip-icon" />
                            当要导入的数据与已有数据存在名称/手机号重复时，请选择处理方式：
                          </div>

                          <div class="duplicate-config">
                            <div class="config-row">
                              <div class="config-item">
                                <label class="config-label">重复字段</label>
                                <el-select
                                  v-model="repeatHandleField"
                                  placeholder="重复字段"
                                  class="config-select"
                                >
                                  <el-option label="名称" value="1" />
                                  <el-option label="手机号" value="2" />
                                </el-select>
                              </div>

                              <div class="config-separator">重复时</div>

                              <div class="config-item">
                                <label class="config-label">处理方式</label>
                                <el-select
                                  v-model="repeatHandleType"
                                  placeholder="处理方式"
                                  class="config-select"
                                >
                                  <el-option label="更新旧的" value="1" />
                                  <el-option label="插入新的" value="2" />
                                  <el-option label="跳过" value="3" />
                                </el-select>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="tip-footer">
                          <span class="file-format">仅允许导入 xlsx 格式文件。</span>
                          <el-link
                            :underline="false"
                            type="primary"
                            @click="importTemplate"
                            class="template-link"
                          >
                            <Icon icon="ep:download" class="link-icon" />
                            下载模板
                          </el-link>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                  <el-button
                    :disabled="formLoading"
                    type="primary"
                    @click="submitForm"
                    class="submit-btn"
                  >
                    <Icon icon="ep:check" class="btn-icon" />
                    确定
                  </el-button>
                  <el-button @click="dialogVisible = false" class="cancel-btn">
                    <Icon icon="ep:close" class="btn-icon" />
                    取消
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 右侧历史记录区域 -->
          <el-col :span="16" class="history-section">
            <div class="history-wrapper">
              <div class="section-header">
                <Icon icon="ep:clock" class="section-icon" />
                <span class="section-title">导入历史</span>
              </div>

              <!-- 搜索区域 -->
              <div class="search-wrapper">
                <el-form
                  :model="queryParams"
                  ref="queryFormRef"
                  :inline="true"
                  label-position="left"
                  class="search-form"
                >
                  <el-form-item label="状态" prop="transformStatus" class="search-item">
                    <div class="select-wrapper">
                      <Icon icon="ep:info-filled" class="select-icon" />
                      <el-select
                        v-model="queryParams.status"
                        class="enhanced-select"
                        placeholder="请选择状态"
                      >
                        <el-option :value="0" label="待执行" />
                        <el-option :value="1" label="进行中" />
                        <el-option :value="2" label="已完成" />
                        <el-option :value="3" label="失败" />
                      </el-select>
                    </div>
                  </el-form-item>

                  <el-form-item label="创建时间" prop="createTime" class="search-item">
                    <div class="date-wrapper">
                      <Icon icon="ep:calendar" class="date-icon" />
                      <el-date-picker
                        v-model="queryParams.createTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                        class="enhanced-date-picker"
                      />
                    </div>
                  </el-form-item>

                  <el-form-item class="search-actions">
                    <div class="search-buttons">
                      <el-button @click="handleQuery" class="search-btn">
                        <Icon icon="ep:search" class="btn-icon" />
                        搜索
                      </el-button>
                      <el-button @click="resetQuery" class="reset-btn">
                        <Icon icon="ep:refresh" class="btn-icon" />
                        重置
                      </el-button>
                    </div>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 表格区域 -->
              <div class="table-wrapper">
                <el-table :data="tableData" class="enhanced-table" border>
                  <el-table-column
                    prop="fileName"
                    label="文件名称"
                    show-overflow-tooltip
                    align="center"
                    min-width="140"
                  >
                    <template #default="scope">
                      <div class="file-cell">
                        <Icon icon="ep:document" class="file-icon" />
                        <span class="file-name">{{ scope.row.fileName }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getStatusType(scope.row.status)" class="status-tag">
                        <Icon :icon="getStatusIcon(scope.row.status)" class="tag-icon" />
                        {{ statusMap[scope.row.status] }}
                      </el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="createTime"
                    label="创建时间"
                    show-overflow-tooltip
                    width="160"
                  >
                    <template #default="scope">
                      <div class="time-cell">
                        <Icon icon="ep:calendar" class="time-icon" />
                        <span class="time-text">{{ formatDate(scope.row.createTime) }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="dataCount" label="总行数" width="100" align="center">
                    <template #default="scope">
                      <div class="count-cell">
                        <Icon icon="ep:document-copy" class="count-icon" />
                        <span class="count-text">{{ scope.row.dataCount }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="insertCount" label="插入数量" width="120" align="center">
                    <template #default="scope">
                      <div class="count-cell success">
                        <Icon icon="ep:plus" class="count-icon" />
                        <span class="count-text">{{ scope.row.insertCount }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="updateCount" label="更新数量" width="120" align="center">
                    <template #default="scope">
                      <div class="count-cell warning">
                        <Icon icon="ep:edit" class="count-icon" />
                        <span class="count-text">{{ scope.row.updateCount }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="failCount" label="失败数量" width="120" align="center">
                    <template #default="scope">
                      <div class="count-cell danger">
                        <Icon icon="ep:close" class="count-icon" />
                        <span class="count-text">{{ scope.row.failCount }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="repeatField" label="重复字段校验" width="120">
                    <template #default="scope">
                      <div class="field-cell">
                        <Icon icon="ep:key" class="field-icon" />
                        <span class="field-text">{{ repeatFieldMap[scope.row.repeatField] }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="repeatHandle" label="重复时操作" width="120">
                    <template #default="scope">
                      <div class="handle-cell">
                        <Icon icon="ep:operation" class="handle-icon" />
                        <span class="handle-text">{{
                          repeatHandleMap[scope.row.repeatHandle]
                        }}</span>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" width="160" fixed="right">
                    <template #default="scope">
                      <div class="action-cell">
                        <a
                          v-if="scope.row.errorFileUrl"
                          :href="scope.row.errorFileUrl"
                          class="download-link"
                        >
                          <Icon icon="ep:download" class="download-icon" />
                          下载错误数据
                        </a>
                        <span v-else class="no-action">-</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-wrapper">
                  <Pagination
                    :total="total"
                    v-model:page="queryParams.pageNo"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import * as CluePoolApi from '@/api/crm/cluePool'
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
import type { UploadUserFile } from 'element-plus'
import { useCrmStore } from '@/store/modules/crm'
import { formatDate } from '@/utils/formatTime'
import { importTaskPage } from '@/api/crm/clue/index'
import * as UserApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user'
const crmStore = useCrmStore()
import axios from 'axios'
import * as CrmModuleApi from '@/api/crm/module'

// 从 store 中获取模块列表
const modules = ref([])
// 点击时更新当前模块id
const onChangeSetModuleId = (e) => {
  crmStore.setModuleId(e)
  moduleId.value = e
}
defineOptions({ name: 'SystemUserImportForm' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const uploadRef = ref()
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref<UploadUserFile[]>([]) // 文件列表
const ownerUserId = ref(null)

const statusMap = {
  0: '待执行',
  1: '进行中',
  2: '已完成',
  3: '失败'
}
const repeatFieldMap = {
  1: '名称',
  2: '手机号'
}
const repeatHandleMap = {
  1: '更新旧的',
  2: '插入新的',
  3: '跳过'
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 0:
      return 'info'
    case 1:
      return 'warning'
    case 2:
      return 'success'
    case 3:
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 0:
      return 'ep:clock'
    case 1:
      return 'ep:loading'
    case 2:
      return 'ep:check'
    case 3:
      return 'ep:close'
    default:
      return 'ep:info-filled'
  }
}

const moduleId = ref(null)
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  fileList.value = []
  resetForm()
  if (crmStore.getModuleId) {
    moduleId.value = JSON.parse(JSON.stringify(crmStore.getModuleId))
  }
  userOptions.value = await UserApi.getSimpleUserList()
  ownerUserId.value = useUserStore().getUser.id
  modules.value = await CrmModuleApi.getModuleList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const repeatHandleField = ref('1')
const repeatHandleType = ref('1')
/** 提交表单 */
const submitForm = async () => {
  if (moduleId.value == undefined) {
    message.error('请选择所属模块')
    return
  }
  if (fileList.value.length == 0) {
    message.error('请上传文件')
    return
  }

  // 提交请求
  uploadHeaders.value = {
    Authorization: 'Bearer ' + getAccessToken(),
    'tenant-id': getTenantId()
  }
  formLoading.value = true
  const formData = new FormData()
  formData.append('pool', false)
  formData.append('repeatHandleField', repeatHandleField.value)
  formData.append('repeatHandleType', repeatHandleType.value)
  formData.append('moduleId', moduleId.value)
  formData.append('ownerUserId', ownerUserId.value)
  formData.append('file', fileList.value[0].raw)
  // TODO @芋艿：后面是不是可以采用这种形式，去掉 uploadHeaders
  const res = await CluePoolApi.handleImport(formData)
  if (res) {
    queryParams.pageNo = 1
    getList()
    resetForm()
    emits('success')
  }
}
const tableData = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  bizeType: 1,
  status: null,
  createTime: null
})
// 列表
const getList = async () => {
  const data = await importTaskPage(queryParams)
  total.value = data.total
  tableData.value = data.list
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.status = null
  queryParams.createTime = null
  handleQuery()
}
/** 文件上传成功 */
const emits = defineEmits(['success'])
const submitFormSuccess = (response: any) => {
  if (response.code !== 0) {
    message.error(response.msg)
    formLoading.value = false
    return
  }
  // 拼接提示语
  const data = response.data
  let text = '上传成功数量：' + data.createClueNames.length + ';'
  for (let clueName of data.createClueNames) {
    text += '< ' + clueName + ' >'
  }
  text += '更新成功数量：' + data.updateClueNames.length + ';'
  for (const clueName of data.updateClueNames) {
    text += '< ' + clueName + ' >'
  }
  text += '更新失败数量：' + Object.keys(data.failureClueNames).length + ';'
  for (const clueName in data.failureClueNames) {
    text += '< ' + clueName + ': ' + data.failureClueNames[clueName] + ' >'
  }
  message.alert(text)
}

/** 上传错误提示 */
const submitFormError = (): void => {
  message.error('上传失败，请您重新上传！')
  formLoading.value = false
}

/** 重置表单 */
const resetForm = () => {
  // 重置上传状态和文件
  formLoading.value = false
  uploadRef.value?.clearFiles()
}

/** 文件数超出提示 */
const handleExceed = (): void => {
  message.error('最多只能上传一个文件！')
}

/** 下载模板操作 */
const importTemplate = async () => {
  if (moduleId.value) {
    axios({
      url:
        import.meta.env.VITE_BASE_URL +
        '/admin-api/crm/clue/get-custom-import-template?moduleId=' +
        moduleId.value,
      method: 'post',
      responseType: 'blob',
      headers: {
        Authorization: 'Bearer ' + getAccessToken(),
        'tenant-id': getTenantId()
      }
    }).then((res) => {
      download.excel(res.data, '线索导入模版.xlsx')
    })
  } else {
    ElMessage.warning('请选择所属模块的模板')
  }
}
</script>

<style lang="scss" scoped>
.import-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 10px auto;
      max-height: 95vh;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 85vh;
    overflow-y: auto;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 主要内容区域 */
.main-content {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.content-row {
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

/* 左侧导入区域 */
.import-section {
  @media (max-width: 768px) {
    width: 100% !important;
    margin-bottom: 20px;
  }
}

.import-wrapper {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  height: fit-content;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

/* 右侧历史记录区域 */
.history-section {
  @media (max-width: 768px) {
    width: 100% !important;
  }
}

.history-wrapper {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  height: fit-content;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

/* 区域头部 */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0052cc;
}

.section-icon {
  color: #0052cc;
  font-size: 18px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* 表单样式 */
.form-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  margin-bottom: 0;

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    margin-bottom: 8px;
  }
}

/* 输入框和选择框样式 */
.select-wrapper,
.date-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.select-icon,
.date-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-select,
.enhanced-date-picker {
  width: 100%;

  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    min-height: 40px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 16px; // 防止iOS缩放
    }
  }

  :deep(.el-input__suffix) {
    right: 12px;
  }
}

/* 文件上传区域 */
.upload-section {
  margin-top: 20px;
}

.upload-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.upload-icon {
  color: #0052cc;
  font-size: 16px;
}

.upload-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.enhanced-upload {
  :deep(.el-upload-dragger) {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    transition: all 0.2s ease;
    padding: 40px 20px;

    &:hover {
      border-color: #0052cc;
      background: rgba(0, 82, 204, 0.02);
    }

    @media (max-width: 768px) {
      padding: 30px 16px;
    }
  }
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-main-icon {
  font-size: 48px;
  color: #6b7280;

  @media (max-width: 768px) {
    font-size: 36px;
  }
}

.upload-text {
  color: #6b7280;
  font-size: 14px;
  text-align: center;

  em {
    color: #0052cc;
    font-style: normal;
    font-weight: 500;
  }

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

/* 上传提示 */
.upload-tip {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.tip-section {
  margin-bottom: 16px;
}

.tip-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  margin-bottom: 12px;
  line-height: 1.5;
}

.tip-icon {
  color: #f59e0b;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.duplicate-config {
  margin-left: 22px;
}

.config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}

.config-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.config-select {
  :deep(.el-input__wrapper) {
    min-height: 32px;
    font-size: 12px;
  }
}

.config-separator {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  margin: 0 8px;

  @media (max-width: 768px) {
    text-align: center;
    margin: 0;
  }
}

.tip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.file-format {
  font-size: 12px;
  color: #6b7280;
}

.template-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;

  .link-icon {
    font-size: 12px;
  }
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

.submit-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (max-width: 768px) {
    width: 100%;
    order: 1;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100%;
    order: 2;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 搜索区域 */
.search-wrapper {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.search-form {
  .search-item {
    margin-bottom: 0;
    margin-right: 20px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
      font-size: 14px;
      width: 80px;
    }

    @media (max-width: 768px) {
      margin-right: 0;
      margin-bottom: 12px;
      width: 100%;

      :deep(.el-form-item__label) {
        width: 60px;
      }
    }
  }

  .search-actions {
    margin-bottom: 0;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.search-buttons {
  display: flex;
  gap: 8px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.search-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  color: white;
  font-size: 14px;

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 4px;
  }
}

.reset-btn {
  border: 1px solid #e5e7eb;
  color: #6b7280;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 4px;
  }
}

/* 表格区域 */
.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
      font-size: 13px;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
  }

  @media (max-width: 768px) {
    :deep(.el-table__cell) {
      padding: 8px 4px;
      font-size: 12px;
    }
  }
}

/* 表格单元格样式 */
.file-cell,
.time-cell,
.count-cell,
.field-cell,
.handle-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-icon,
.time-icon,
.count-icon,
.field-icon,
.handle-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.file-icon {
  color: #0052cc;
}

.time-icon {
  color: #6b7280;
}

.count-icon {
  font-size: 12px;
}

.field-icon {
  color: #f59e0b;
}

.handle-icon {
  color: #10b981;
}

.file-name,
.time-text,
.count-text,
.field-text,
.handle-text {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.count-cell {
  justify-content: center;

  &.success {
    .count-icon {
      color: #10b981;
    }
    .count-text {
      color: #10b981;
    }
  }

  &.warning {
    .count-icon {
      color: #f59e0b;
    }
    .count-text {
      color: #f59e0b;
    }
  }

  &.danger {
    .count-icon {
      color: #ef4444;
    }
    .count-text {
      color: #ef4444;
    }
  }
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;

  .tag-icon {
    font-size: 12px;
  }
}

.action-cell {
  display: flex;
  justify-content: center;
}

.download-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #0052cc;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  .download-icon {
    font-size: 12px;
  }
}

.no-action {
  color: #d1d5db;
  font-size: 12px;
}

/* 分页 */
.pagination-wrapper {
  padding: 16px;
  background: white;
  border-top: 1px solid #f1f5f9;

  :deep(.el-pagination) {
    justify-content: center;

    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .import-wrapper,
  .history-wrapper {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .section-title {
    color: #f9fafb;
  }

  .section-header {
    border-color: #60a5fa;
  }

  .section-icon {
    color: #60a5fa;
  }

  .enhanced-select,
  .enhanced-date-picker {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .select-icon,
  .date-icon {
    color: #d1d5db;
  }

  .enhanced-upload {
    :deep(.el-upload-dragger) {
      background: #4b5563;
      border-color: #6b7280;

      &:hover {
        border-color: #60a5fa;
        background: rgba(96, 165, 250, 0.1);
      }
    }
  }

  .upload-text {
    color: #d1d5db;

    em {
      color: #60a5fa;
    }
  }

  .upload-tip {
    background: #4b5563;
    border-color: #6b7280;
  }

  .tip-title {
    color: #f9fafb;
  }

  .search-wrapper {
    background: #4b5563;
    border-color: #6b7280;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }

  .file-name,
  .time-text,
  .count-text,
  .field-text,
  .handle-text {
    color: #f9fafb;
  }

  .pagination-wrapper {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .form-item {
    :deep(.el-form-item__label) {
      color: #f9fafb;
    }
  }

  .search-form {
    .search-item {
      :deep(.el-form-item__label) {
        color: #f9fafb;
      }
    }
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .enhanced-select,
  .enhanced-date-picker {
    :deep(.el-input__wrapper) {
      border: 2px solid #0052cc;
      box-shadow: none;

      &:hover,
      &.is-focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
      }
    }
  }

  .enhanced-upload {
    :deep(.el-upload-dragger) {
      border: 2px solid #0052cc;

      &:hover {
        border-color: #1d4ed8;
      }
    }
  }

  .submit-btn {
    background: #0052cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .cancel-btn {
    border: 2px solid #6b7280;
  }
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .enhanced-select,
  .enhanced-date-picker,
  .enhanced-upload,
  .submit-btn,
  .cancel-btn,
  .search-btn,
  .reset-btn,
  .download-link {
    transition: none;
  }

  .submit-btn {
    &:hover {
      transform: none;
    }
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .enhanced-select,
  .enhanced-date-picker {
    :deep(.el-input__wrapper) {
      min-height: 44px;
    }
  }

  .submit-btn,
  .cancel-btn,
  .search-btn,
  .reset-btn {
    min-height: 44px;
    padding: 12px 20px;
  }

  .enhanced-upload {
    :deep(.el-upload-dragger) {
      padding: 40px 20px;
    }
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .dialog-header {
    padding: 12px;
  }

  .main-content {
    padding: 12px;
  }

  .import-wrapper,
  .history-wrapper {
    padding: 12px;
  }

  .enhanced-table {
    font-size: 11px;

    :deep(.el-table__cell) {
      padding: 6px 2px;
    }
  }
}

/* 横屏模式适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .dialog-header {
    padding: 12px 16px;
    flex-direction: row;
    text-align: left;
  }

  .content-row {
    flex-direction: row;
  }

  .import-section {
    width: 35% !important;
    margin-bottom: 0;
  }

  .history-section {
    width: 65% !important;
  }

  .search-form {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .search-item {
    width: auto !important;
    margin-right: 16px !important;
    margin-bottom: 8px !important;
  }
}
</style>
